<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <el-input v-model="txt" placeholder="输入文字缓存" style="margin-bottom:30px;" />
    <router-link to="/example/tree"> <button>点击跳转tree</button> </router-link>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      txt: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    console.log('to:' + to.name)
    // 去往详情页的时候需要缓存组件，其他情况下不需要缓存
    if (to.name === 'Tree') {
      this.$store.dispatch('app/addCachePages', from.name)
    } else {
      this.$store.dispatch('app/removeCachePages', from.name)
    }
    next()
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
